<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script th:src="@{/asserts/scripts/JQurey3.6.4.js}"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
    <div id="app">
        <div style="text-align: center">
            <h3>用户管理页面</h3>
            <p>欢迎您 :<span th:text="${session.userInfo.username}" th:if="${!#strings.isEmpty(session.userInfo)}"></span></p>
        </div>
        <hr />
        <div>
            <form>
                姓名 :<input type="text" v-model="username" />
                学历 :
                <select v-model="edu">
                    <option value="-1">请选择</option>
                    <option value="1">博士</option>
                    <option value="2">硕士</option>
                    <option value="3">本科</option>
                    <option value="4">大专</option>
                    <option value="5">其他</option>
                </select>

                <button @click.prevent="search">搜索</button>
            </form>
        </div>
        <button @click="openAddView">添加用户</button>
        <div>
            <table border="1" width="1000px">
                <tr>
                    <th><input type="checkbox"></th>
                    <th>ID</th>
                    <th>姓名</th>
                    <th>性别</th>
                    <th>年龄</th>
                    <th>手机</th>
                    <th>学历</th>

                    <th>操作</th>
                </tr>
                <tr v-for="u in userList">
                    <td>
                        <input type="checkbox" name="userId" :value="u.id">
                    </td>
                    <td v-text="u.id"></td>
                    <td v-text="u.username"></td>
                    <td v-text="u.sex"></td>
                    <td v-text="u.age"></td>
                    <td v-text="u.tel"></td>
                    <td>
                        <span v-if="u.education ==1">博士</span>
                        <span v-if="u.education ==2">硕士</span>
                        <span v-if="u.education ==3">本科</span>
                        <span v-if="u.education ==4">大专</span>
                        <span v-if="u.education ==5">其他</span>
                    </td>

                    <td>
                        <button @click="openEditUser(u)">修改</button>
                        =
                        <button @click="del(u.id)">删除</button>
                    </td>
                </tr>
            </table>
            <!--添加-->
            <form v-show="addUserForm">
                姓名 :<input type="text" v-model="userAdd.username" />  <p />

                姓别 :
                <input type="radio" name="sex" v-model="userAdd.sex" value="男" />男
                <input type="radio" name="sex" v-model="userAdd.sex" value="女"/>女
                <p />

                年龄 :<input type="text" v-model="userAdd.age" />  <p />

                手机 :<input type="text" v-model="userAdd.tel" />  <p />

                学历 :
                <select v-model="userAdd.education">
                    <option value="-1">请选择</option>
                    <option value="1">博士</option>
                    <option value="2">硕士</option>
                    <option value="3">本科</option>
                    <option value="4">大专</option>
                    <option value="5">其他</option>
                </select>  <p />

                <button @click.prevent="add">保存</button>
            </form>


            <!--修改狂-->
            <form v-show="editUserForm">
                姓名 :<input type="text" v-model="userEdit.username" />  <p />

                姓别 :
                    <input type="radio" name="sex" v-model="userEdit.sex" value="男" />男
                    <input type="radio" name="sex" v-model="userEdit.sex" value="女"/>女
                    <p />

                年龄 :<input type="text" v-model="userEdit.age" />  <p />

                手机 :<input type="text" v-model="userEdit.tel" />  <p />

                学历 :
                    <select v-model="userEdit.education">
                        <option value="-1">请选择</option>
                        <option value="1">博士</option>
                        <option value="2">硕士</option>
                        <option value="3">本科</option>
                        <option value="4">大专</option>
                        <option value="5">其他</option>
                    </select>  <p />

                <button @click.prevent="modify">保存</button>
            </form>

        </div>


        <div>
            <el-table
                    :data="userList"
                    style="width: 100%"
                    :row-class-name="tableRowClassName">
                <el-table-column
                        prop="username"
                        label="姓名"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="sex"
                        label="姓别"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="age"
                        label="年龄"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="tel"
                        label="手机"
                        width="180">
                </el-table-column>
                <el-table-column
                        label="学历"
                        width="180">
                    <template slot-scope="scope">
                        <span v-if="scope.row.education ==1">博士</span>
                        <span v-if="scope.row.education ==2">硕士</span>
                        <span v-if="scope.row.education ==3">本科</span>
                        <span v-if="scope.row.education ==4">大专</span>
                        <span v-if="scope.row.education ==5">其他</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button
                                size="mini"
                                >编辑</el-button>
                        <el-button
                                size="mini"
                                type="danger"
                                >删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>


    </div>

    <script>
        let vueApp = new Vue({
            el:"#app",
            data:{
                userList:[],
                username:'',
                edu:-1,
                editUserForm:false,
                userEdit:{
                    id:'',
                    username:'',
                    password:'',
                    sex:'男',
                    age:'',
                    tel:'',
                    education:2
                },
                addUserForm:false,
                userAdd:{
                    username:'',
                    sex:'男',
                    age:'',
                    tel:'',
                    education:-1
                }
            },
            methods:{
                //保存添加用户
                add(){
                    let url = "./user/add" ;
                    $.ajax({
                        type:'post',
                        url:url,
                        data:vueApp.userAdd,
                        dataType:'json',
                        contentType:'application/x-www-form-urlencoded',
                        success:function (data){
                            if (data.code == 200) {
                                alert(data.msg);
                                //关闭修改框
                                vueApp.addUserForm = false;
                                vueApp.initData();
                            }else {
                                alert(data.msg)
                            }
                        }
                    });
                },
                //打开添加框
                openAddView(){
                    this.addUserForm = true ;
                },
                del(id){
                    let url = "./user/del?id="+id ;  // "id="+id
                    if (confirm('确认删除吗?')){
                        $.get(url,function (data){
                            if (data.code == 200){
                                alert(data.msg);
                                vueApp.initData();
                            }else {
                                alert(data.msg);
                            }
                        },'json');
                    }
                },
                //保存修改
                modify(){
                    let url = "./user/modify" ;
                    $.ajax({
                        type:'post',
                        url:url,
                        data:vueApp.userEdit,
                        dataType:'json',
                        contentType:'application/x-www-form-urlencoded',
                        success:function (data){
                            if (data.code == 200) {
                                alert(data.msg);
                                //关闭修改框
                                vueApp.editUserForm = false;
                                vueApp.initData();
                            }else {
                                alert(data.msg)
                            }
                        }
                    });
                },
                //打开膝盖框
                openEditUser(u){
                    this.editUserForm = true ;
                    //根据用户的id 查询一个用户对象
                    //this.userEdit = u ;
                    $.get('./user/findById?id='+u.id,function (data){
                        vueApp.userEdit = data.data ;
                    },"json")
                },
                search(){
                    this.initData();
                },
                //初始化查询数据
                initData(){
                    let url = "./user/list?username="+this.username +"&education="+this.edu;
                    let _this = this ;
                    $.get(url,function (data){
                        console.log(data);
                        //这里不能直接使用 this 因为这里的this 代表 jquery对象
                        //_this.userList = data.data.list ;
                        vueApp.userList = data.data.list ;
                    },"json");
                }
            },
            created(){
                //查询 数据
                this.initData();
            }
        });
    </script>
</body>
</html>